<template>
	<div class="heightMax publicbox" v-loading='tableLoading'>
		<div class="header">
			<div class="listName">
				<i></i><span class="font14">制造单位信息</span>
			</div>
			<div>
				<el-button type="primary" size="mini" @click="enture('form')" v-loading='btnLoading' v-if="!isDisabled">保存</el-button>
				<el-button size="mini" @click='backRouter'>返回</el-button>
			</div>
		</div>
		<vueScroll>
			<div class="content">
				<el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth" style='margin-top: 25px;height: 100%;'
				 size="mini">
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="单位名称:" prop="firmName">
								<el-input size="mini" v-model.trim="form.firmName" placeholder="请输入单位名称" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="品牌名称:" >
								<el-input size="mini" v-model.trim="form.brand_name" placeholder="请输入品牌名称" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="单位编号:" prop="code">
								<el-input size="mini" v-model.trim="form.code" placeholder="请输入单位编号" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="单位电话:" >
								<el-input size="mini" v-model.trim="form.manu_phone" placeholder="请输入单位电话" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="联系人:" >
								<el-input size="mini" v-model.trim="form.contact" placeholder="请输入联系人" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="联系人电话:" >
								<el-input size="mini" v-model.trim="form.contact_phone" placeholder="请输入联系人电话" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="单位地址:" >
								<el-input size="mini" v-model.trim="form.address" placeholder="请输入单位地址" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</vueScroll>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		axiosChange
	} from "@/common.js";
	import {
		firmName,
		brand_name,
		code,
		address,
		manu_phone,
		contact,
		contact_phone
	} from './rules.js'
	export default {
		props: {
			typeNow: Number,
			default () {
				return 0 //0是新增 1是编辑 2是查看
			}
		},
		mounted(){
			if(this.typeNow){
				this.getComplieList()
			}
		},
		data() {
			return {
				tableLoading: false,
				btnLoading: false,
				formLabelWidth: '130px',
				formLabelWidth1: '90px',
				form: {
					firmName: '',
					brand_name: '',
					code: '',
					address: '',
					manu_phone: '',
					contact: '',
					contact_phone: ''
				},
				rules: {
					firmName,
					brand_name,
					code,
					address,
					manu_phone,
					contact,
					contact_phone
				}
			}
		},
		computed: {
			isDisabled() {
				if (this.typeNow == 2) {
					return true
				} else {
					return false
				}
			},
			ManufactureCompanyId() {
				if (localStorage.ManufactureCompanyId) {
					return JSON.parse(localStorage.ManufactureCompanyId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			//获取编辑数据
			getComplieList(){
				let url = '/manu/manufacturer/' + this.ManufactureCompanyId + '/'
				this.tableLoading = true
				axiosGet(url,{},(res)=>{
					this.tableLoading = false
					if(res.code == 0){
						this.form.firmName = res.detail.name
						this.form.address = res.detail.address
						this.form.brand_name = res.detail.brand_name
						this.form.code = res.detail.code
						this.form.contact = res.detail.contact
						this.form.contact_phone = res.detail.contact_phone
						this.form.manu_phone = res.detail.manu_phone
					}else{
						this.$message.error(res.detail.result)
					}
				})
			},
			//返回上一级
			backRouter() {
				let obj = {
					name: '制造单位管理',
					router: '/MainView/BusinessConfiguration/ManufactureCompany'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			//提交
			enture(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url = ''
						let method = ''
						let data = {
							name: this.form.firmName,
							brand_name:this.form.brand_name,
							code: this.form.code,
							address: this.form.address,
							manu_phone: this.form.manu_phone,
							contact: this.form.contact,
							contact_phone: this.form.contact_phone
						}
						if (this.typeNow) {
						url = '/manu/manufacturer/' + this.ManufactureCompanyId + '/'
							method = 'put'
						} else {
							url = '/manu/manufacturer/'
							method = 'post'
						}
						this.btnLoading = true
						axiosChange(url, method, data, (res) => {
							this.btnLoading = false
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								this.backRouter()
								localStorage.RoleManagementFlush = JSON.stringify({
									id: 1
								})
							} else {
								this.$message.error(res.detail.result)
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.header {
		display: flex;
		justify-content: space-between;
	}

	.content {
		height: 90%;
		width: 100%;
		margin-top: 5px;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}

	.el-row {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
</style>
